<template>
    <div id="iLogs">
        <el-row>
            <el-col :span="10">
                <div>
                    <div style="position:relative;width:1.0vw;background:#898989;height:4vw;margin-left:3vw"></div>
                    <div style="position:absolute;top:1.5vw;left:5vw;font-size: 1.2vw">THIS IS A ASSIGHNMENT MANAGEMENT SYSTEM</div>
                </div>
                <div class="ibody">
                    <div class="head">修改密码</div>
                    <div class="body">
                        <div style="width:45%;float:left;margin-bottom:0.4vw">
                             <span style="font-size:01vw;padding:0 0 0 0.5vw">账号</span>
                             <input style="box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;margin:0.3vw 0 0 0;padding:0.4vw;font-size:1vw;width:80%;background:white;border:none;outline:none;"  v-model="userID" placeholder="学号/工号">
                        </div>
                        <div style="width:55%;top:0;float:left;margin-bottom:0.4vw">
                             <span style="font-size:01vw;padding:0 0 0 0.8vw">原密码</span>
                             <input style="box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;margin:0.3vw;padding:0.4vw;font-size:1vw;width:82%;background:white;border:none;outline:none;" v-model="passWord" placeholder="密码">
                        </div>
                        <div style="width:55%;top:0;float:left;margin-bottom:0.4vw">
                            <el-button @click="toproving">确定</el-button>
                        </div>
                        <div style="width:55%;top:0;float:left;margin-bottom:0.4vw">
                             <span style="font-size:01vw;padding:0 0 0 0.8vw">新密码</span>
                             <input style="box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;margin:0.3vw;padding:0.4vw;font-size:1vw;width:82%;background:white;border:none;outline:none;" v-model="N_passWord" placeholder="密码">
                        </div>
                        <div style="width:55%;top:0;float:left;margin-bottom:0.4vw">
                             <span style="font-size:01vw;padding:0 0 0 0.8vw">再次确认密码</span>
                             <input style="box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;margin:0.3vw;padding:0.4vw;font-size:1vw;width:82%;background:white;border:none;outline:none;" v-model="re_passWord" placeholder="密码">
                        </div>
                        <div style="width:55%;top:0;float:left;margin-bottom:0.4vw">
                            <el-button @click="tochange">确定</el-button>
                        </div>
                    </div>
                    
                        
                         <!--<div style="width:85%;margin:0 0 0 9%">
                             <img class="warnIcon">
                             <span style="font-size:0.8vw;color:#898989">
                                初始密码为身份证后6位数，点击
                             <span style="text-decoration:underline;padding:0 0 0 0.2vw;color:#ea9200;" @click="tochangePw">修改密码</span>
                             </span>
                         </div>-->
                         <div style="width:100%;margin-top:vw;position:relative">
                             <!--<el-checkbox style="margin:0 0 0 2vw;padding:0 0 1.5vw 0 " v-model="checked">记住账号</el-checkbox>-->
                             <!--<el-button style="position:absolute;top:0.5vw;right:2.5vw" plain  @click="">确定</el-button>-->
                         </div>
                </div>
              
            </el-col>
            <el-col :span="14">
                <img src="../assets/login.png">
            </el-col>
        </el-row>       
    </div>
</template>
<script>
import axios from 'axios'
    export default {
        data() {
            return {
              userID: localStorage.userID,
              passWord:'',
              N_passWord:'',
              re_passWord:''
            }
        },
        methods: {
             toproving(){
                 var params = new URLSearchParams();
                params.append('userID',this.userID);
                params.append('password',this.passWord );
                var _this = this
                 axios.post('/users/signin',params).then(function (res) {
                    if(res.data.stauts=='success') {
                       alert('密码正确');
                   }else {
                    alert(res.data.msg)
                   }
                }).catch(function (err) {
                    console.log(err);
                })
            },
            tochange(){
                 var params = new URLSearchParams();
                params.append('userID',this.userID);
                // params.append('password',this.passWord );
                params.append('newPassword',this.N_passWord );
                var _this = this
                 axios.post('/users/resetPW',params).then(function (res) {
                    if(res.data.stauts=='success') {
                       alert('修改成功');
                   }else {
                    alert(res.data.msg)
                   }
                }).catch(function (err) {
                    console.log(err);
                })
            },
        }
       
    }
</script>
<style>
    #iLogs{
        background-color: #e9e9e9;
        height:100vh;
    }
    #iLogs .ibody{
        margin:10vw 0 0 4vw;
        width: 25vw;
        background-color: #d2d2d2;
        box-shadow:5px 5px 18px rgba(0,0,0,0.4);
    }
    #iLogs .ibody .head{
        box-shadow:0px 5px 10px rgba(0,0,0,0.5);
        padding: 0.4vw 0 0.4vw 0;
        font-size: 1.4vw;
        background: #898989;
        text-align: center;
    }
     #iLogs .ibody .body{
         margin:1.5vw 0 0 2vw;
    }
    #iLogs .ibody .bottom{
         margin:10vw 0 0 2vw;
         background: red
    }
    .el-checkbox__label{
        font-size: 0.5vw
    }
    .warnIcon {
        width: 1vw;
        height: 1vw;
        background: #ea9200;
    }
   #iLogs .el-button{
       padding:0.3vw 0.5vw;
       font-size: 0.8vw;
       background-color: #d2d2d2;
       box-shadow:0vw 0.5vw 01vw rgba(255,255,255,01) inset;
   }
   #iLogs .rnt{
       color:#606060;
       position: relative;
       width: 100%;
       padding-left:4vw;
       padding-top:3vw 
   }
   #iLogs .rnt div{
       width: 50%;
   }
   #iLogs .rnt .r{
       width:12vw;
       height: 14vw;
       border-right: 0.15vw solid #606060
   }
   #iLogs .rnt .t{
       position: absolute;
       top:3.5vw;
       left: 18vw;
   }
</style>
